<template>
  <div>
    <el-card>
      <ul>
        <li>文件名称:{{ state.filename }}</li>
        <li>文件类型:{{ state.type }}</li>
        <li>
          分享链接:
          <a
            :href="state.relativeFilePath"
            target="_blank"
            :type="state.type"
            >{{ state.relativeFilePath }}</a
          >
        </li>
      </ul>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { shareApi } from "@/utils/api";

const state = ref({});
const router = useRouter();
const id = router.currentRoute.value.query.id;

onMounted(async () => {
  const res = await shareApi({ id });
  const { filename, type, relativeFilePath } = res.data[0];
  state.value = { filename, type, relativeFilePath };
});

const methods = {};
</script>

<style lang="less" scoped>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
}
</style>
